<script setup lang="ts">
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import { createMsgBox } from "@/Public-UIlibrary/pb-message-box/method.ts"
import { ref } from "vue"
const props = defineProps({
  text: {
    type: String,
    default: "导入",
  },
  popupTitle: {
    type: String,
    default: "导入",
  },
  showDefualt: {
    type: Boolean,
    default: false
  },
  // 文件大小限制
  maxSize: {
    type: Number,
    default: 15
  },
  // 限制文件格式
  allowedExtensions: {
    type: Array,
    default: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
  },
  // 上传地址
  action: {
    type: String,
    default: '127.0.0.1'
  },
  // 上传时附带的额外参数
  data: {
    type: Object,
    default: {}
  },
  // 是否需要校验
  isCheck: {
    type: Boolean,
    default: false
  },
  // 是否显示上传列表
  showFileList: {
    type: Boolean,
    default: true
  }
})
const parms = computed(() => {
  let data
  if (props.isCheck) {
    data = {
      ...props.data,
      checkData: checkData.value
    }
  } else {
    data = {
      ...props.data,
    }
  }
  return data
})
const elUploadRef = ref(null)
const accessToken = localStorage.getItem("pinia_token");
const checkData = ref(0)
let updateFile = {}
const emits = defineEmits('onImportSuccerr', 'downExcelFn')
let popupvisible = ref(false)
let progressstatus = ref('')
const showImport = () => {
  popupvisible.value = true
}
const closepopupModal = () => {
  popupvisible.value = false
}
const handleChange = (file: any) => {
};
const onSuccess = (res) => {
  console.log(res, '2312321')
  if (res.code == 5002) {
    checkData.value = res.data.checkData
    createMsgBox(
      res.msg,
      { cancelText: '取消', showTitleIcon: true, showConfirm: res.data.checkData, confirmText: '确认', title: '温馨提示', titleType: 'warning', Width: 500, connectList: res.data.errorData, showTitleIcon: true, showIcon: false }).then(res => {
        console.log(res);

        if (res) {
          elUploadRef.value.clearFiles()
          setTimeout(() => {
            elUploadRef.value.handleStart(updateFile)
            elUploadRef.value.submit()
          })

        }
      })
    // return
  }
  if (res.code !== 2000) {
    createMessage({
      message: res.msg,
      type: 'error'
    })
    elUploadRef.value.clearFiles()
  } else {
    createMessage({
      message: '导入成功',
      type: 'success'
    })
    checkData.value = 0
    popupvisible.value = false
    emits('onImportSuccerr')
  }
}
const beforeUpload = (rawFile) => {
  updateFile = rawFile
  if (!props.allowedExtensions.includes(rawFile.type)) {
    createMessage({
      message: '文件类型不合法',
      type: 'error'
    })
    return false
  }
  if (rawFile.size > (props.maxSize * 1024 * 1024)) {
    createMessage({
      message: `文件大小不能超过${maxSize}MB`,
      type: 'error'
    })
    return false
  }
  return true
}
const downExcelFn = () => {
  emits('downExcelFn')
}
</script>

<template>
  <div>
    <pb-button size="small" plain @click="showImport">{{ text }}</pb-button>
  </div>
  <pb-popup v-model="popupvisible" Width="450px" :title="popupTitle" class="intelligentimport" @close="closepopupModal">
    <slot></slot>
    <div class="box">
      <div class="w-380px h-150px uploadbox">
        <el-upload drag ref="elUploadRef" :before-upload="beforeUpload" :action="action" :multiple="multiple"
          @change="handleChange" @success="onSuccess" :headers="{
            'x-token': `${accessToken}`
          }" :data="{
            ...parms,
          }" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :show-file-list="showFileList">
          <div class="uploadimg"><img src="../../assets/images/upload.png" alt=""><span>添加文件</span></div>
          <div class="el-upload__text">
            点击或拖拽文件到该页面上传，单个文件不超过{{ maxSize }}M
          </div>
        </el-upload>
        <div v-show="progressstatus != ''">
          <div class="flex progressstatus">
            <div>
              <pb-icon name="uploadtext" size="24" class="m-r2" :color="'#0D968B'"
                v-show="progressstatus != 'faild'"></pb-icon>
              <pb-icon name="faild" size="24" class="m-r2" :color="'#F52F3E'"
                v-show="progressstatus == 'faild'"></pb-icon>
              <span :style="{ 'color': progressstatus == 'faild' ? '#F52F3E' : '' }">{{ filetext }}</span>
            </div>
            <span v-show="progressstatus == 'faild'" class="p-t4 m-l3">
              <el-upload :before-upload="beforeUpload" multiple @change="handleChange" :action="action"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
                <pb-button text size="small">重新导入</pb-button>
              </el-upload>
            </span>
          </div>
          <div v-show="progressstatus != 'faild'">
            <el-progress :percentage="progress" :show-text="false" />
          </div>
        </div>
        <div class="downbtn" v-if="showDefualt" @click="downExcelFn" v-show="progressstatus == ''">
          下载模板
        </div>
      </div>
    </div>
    <template #footer>
      <div class="el-dialog__footer p-b3">
        <div class="solid"></div>
        <div class="dialog-footer">
          <pb-button size="small" secondary class="m-r3" @click="closepopupModal">取消</pb-button>
        </div>
      </div>
    </template>
  </pb-popup>
</template>

<style lang="scss" scoped>
.intelligentimport {
  .box {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);

    .uploadbox {
      .uploadimg {
        img {
          width: 16px;
          vertical-align: text-bottom;
          height: 16px;
          margin-right: 8px;
        }

        font-family: PingFang SC,
        PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 12px;
      }
    }
  }

  .el-upload-dragger {
    padding: 0;
  }

  .tenantNamebox {
    position: relative;
    align-items: center;

    .icons {
      margin-top: 8px;
    }
  }

  .downbtn {
    margin-top: 10px;
    text-align: center;
    color: rgba(13, 150, 139, 1);
    cursor: pointer;
  }

  .progressstatus {
    align-items: center;
  }
}
</style>